<template>
  <div>
    <el-menu :default-active="activeIndex" :unique-opened="true" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :router="true">
      <div v-for="menu in activeMenu">
        <!--如果没有子菜单-->
        <el-menu-item v-if="!menu.hasChild" :key="menu.menuId" :index="menu.url">
          <i :class="menu.icon"></i>
          <span>{{menu.menuName}}</span>
        </el-menu-item>

        <!--如果有子菜单-->
        <el-submenu  v-if="menu.hasChild" :key="menu.menuId" :index="menu.menuName">
          <template slot="title">
            <i :class="menu.icon"></i>
            <span>{{menu.menuName}}</span>
          </template>
          <!--<el-menu-item-group>-->
            <el-menu-item v-for="chmenu in menu.menus" :key="chmenu.menuId" :index="chmenu.url">
              <i :class="chmenu.icon"></i>
              <span>{{chmenu.menuName}}</span>
            </el-menu-item>
          <!--</el-menu-item-group>-->
        </el-submenu>
      </div>

    </el-menu>
  </div>

</template>

<script>
    export default {
      data() {
        return{
          activeIndex: '1',
          // activeMenu: '',
          userMenus:[
            {
              menuId: '1',
              icon: 'el-icon-menu',
              menuName: '附近商家',
              url: '/restaurants',
              hasChild: false,
              menus: [],

            },
            {
              menuId: '2',
              icon: 'el-icon-location',
              menuName: '收货地址',
              url: '/address',
              hasChild: false,
              menus: [],
            },
            {
              menuId: '5',
              icon: 'el-icon-location',
              menuName: '订单',
              url: '/order',
              hasChild: false,
              menus: [],
            },
            {
              menuId: '3',
              icon: 'el-icon-document',
              menuName: '我的',
              url: '3',
              hasChild: true,
              menus: [
                {
                  menuId: '3-1',
                  icon: 'el-icon-menu',
                  menuName: '收藏店铺',
                  url: '/collection',
                  hasChild: false,
                  menus: [],
                },
                {
                  menuId: '3-2',
                  icon: 'el-icon-menu',
                  menuName: '我的账户',
                  url: '/reset',
                  hasChild: false,
                  menus: [],
                },
              ],

            },
            {
              menuId: '4',
              icon: 'el-icon-document',
              menuName: '更多服务',
              url: '4',
              hasChild: true,
              menus: [
                {
                  menuId: '4-1',
                  icon: 'el-icon-menu',
                  menuName: '商家入盟',
                  url: '/registerRest',
                  hasChild: false,
                  menus: [],
                },
              ],

            },
          ],
          sellerMenus:[
            {
              menuId: '1',
              icon: 'el-icon-menu',
              menuName: '我的店铺',
              url: '/myRestaurant',
              hasChild: false,
              menus: [],
            },
            {
              menuId: '2',
              icon: 'el-icon-location',
              menuName: '餐品管理',
              url: '',
              hasChild: true,
              menus: [
                {
                  menuId: '2-1',
                  icon: 'el-icon-menu',
                  menuName: '菜品管理',
                  url: '/foodManage',
                  hasChild: false,
                  menus: [],
                },
                {
                  menuId: '2-2',
                  icon: 'el-icon-menu',
                  menuName: '类别管理',
                  url: '/cateManage',
                  hasChild: false,
                  menus: [],
                },
              ],
            },
            {
              menuId: '3',
              icon: 'el-icon-document',
              menuName: '订单管理',
              url: '3',
              hasChild: true,
              menus: [
                {
                  menuId: '3-1',
                  icon: 'el-icon-menu',
                  menuName: '新的订单',
                  url: '/latestOrder',
                  hasChild: false,
                  menus: [],
                },
                {
                  menuId: '3-2',
                  icon: 'el-icon-menu',
                  menuName: '历史订单',
                  url: '/completeOrder',
                  hasChild: false,
                  menus: [],
                },
                {
                  menuId: '3-3',
                  icon: 'el-icon-menu',
                  menuName: '订单评价',
                  url: '/comments',
                  hasChild: false,
                  menus: [],
                },
              ],

            },
          ],
        };
      },
      computed: {
        activeMenu() {
          if (this.$store.getters.userType===1){
            return this.userMenus;
          } else if (this.$store.getters.userType===2){
            return this.sellerMenus;
          }
          return null;
        }
      },
      methods: {
        handleOpen(key, keyPath) {
        },
        handleClose(key, keyPath) {
        },
      },

    }
</script>

<style scoped>

</style>
